<template>
  <div class="kxy-container">
    <el-form :model="dataForm" @keyup.enter.native="getDataList()" style="flex: 1" height="100%">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="首页标题">
            <el-input placeholder="请输入内容" v-model="dataForm.hometitle" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="新闻标题">
            <el-input placeholder="请输入内容" v-model="dataForm.newstitle" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="个人中心">
            <el-input placeholder="请输入内容" v-model="dataForm.centertitle" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="考试标题">
            <el-input placeholder="请输入内容" v-model="dataForm.examinationtitle" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="课程标题">
            <el-input placeholder="请输入内容" v-model="dataForm.traintitle" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公司名称">
            <el-input placeholder="请输入内容" v-model="dataForm.companytitle" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="logo:" prop="portrait">
            <avatar-uploader @uploaded="imageUploaded" :avatar="dataForm.logoUrl" name="logo" />
            <!-- <uploader type="image" @uploaded="imageUploaded" :fileList="dataForm.logoUrl"/> -->
            <span style="font-size: 12px">小提示：建议上传大小为100*100(px)像素图</span>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
<!--            style="display: flex; justify-content: flex-end; align-items: flex-end;height: 177px"-->
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './contact-add-or-update'
import AvatarUploader from '@/components/uploader/avatar-uploader'

export default {
  data() {
    return {
      homeList: [],
      homeListLoading: false,
      dataForm: {
        hometitle: '',
        newstitle: '',
        centertitle: '',
        logoUrl: '',
        examinationtitle: '',
        traintitle: '',
        paramKey: 'tenantSysConfig',
        companytitle: ''
      },
      remark: '',
      uploadImgUrl: '',
      paramValue: '',
      fileList: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: { AvatarUploader, AddOrUpdate },
  mounted() {
    this.getDataList()
  },
  methods: {
    dataFormSubmit() {
      this.paramValue = JSON.stringify(this.dataForm)
      this.$http({
        url: this.$http.adornUrl(`/sys/tenantSysConfig/save`),
        method: 'post',
        data: {
          paramKey: this.dataForm.paramKey,
          paramValue: this.paramValue,
          remark: this.remark,
          commentAuditOpen: this.dataForm.commentAuditOpen ? 1 : 0
        }
      }).then(data => {
        if (data && data.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500
          })
          this.getDataList()
        }
      })
    },
    // 上传主图
    imageUploaded(file) {
      this.dataForm.logoUrl = file.url
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(`/sys/tenantSysConfig/config`),
        method: 'post',
        data: this.$http.adornData()
      }).then(res => {
        if (res.code === 200 && res.data && res.data.paramValue) {
          this.dataForm = JSON.parse(res.data.paramValue)
          this.remark = res.data.remark || ''
        } else {
          this.dataForm = {
            hometitle: '',
            newstitle: '',
            centertitle: '',
            logoUrl: '',
            examinationtitle: '',
            traintitle: '',
            paramKey: 'tenantSysConfig',
            companytitle: ''
          }
        }
      })
    },
    // 删除
    deleteHandle(id) {
      var ids = id || this.dataListSelections.map(item => item.id)
      this.$confirm(
        `确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/config/delete'),
            method: 'post',
            data: { ids: ids }
          }).then(data => {
            if (data && data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500
              })
              this.getDataList()
            } else {
              this.$message.warning(data.msg)
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>
